<template>
  <div>
    <cell :render="myRender"></cell>
    <div style="margin-top: 50px">
      位置：<el-input v-model="index" style="width: 100px;"></el-input>
      <el-button type="primary" @click="test">addInput</el-button>
      <el-button type="primary" @click="test2">对象结构</el-button>
    </div>
  </div>
</template>

<script>
  import cell from './render';
  export default {
      data(){
        return {
          content: '12312313', //内容
          index: '0',
          defineMode:{ //定义编辑的对象
          }
        };
      },
      components:{
        cell
      },
      methods:{
        test(){
          this.$set(this.defineMode, this.index, {
            type: 'input' //这里可定义不同的添加对象
          })
        },
        test2(){
          this.$message.success(JSON.stringify(this.defineMode));
        },
        myRender(h){
          let arry = [];
          for (let i in this.content) {
            if (this.defineMode[i] && this.defineMode[i].type === 'input') {
              arry.push(h('el-input',{
                style: {
                  width: '150px'
                }
              }));
            }
            arry.push(this.content[i]);
          }
          return h('div',{
          },arry)
        }
      }
    }
</script>

<style scoped>

</style>
